<template>
	<div>
		<!-- 标题区域 -->
		<van-nav-bar title="登录账号" />
		<div style="height: 45px;"></div>
		<!-- 登录 全域 -->
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<!-- 用户名 账号 -->
				<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<!-- 密码 -->
				<van-field v-model="password" :type="showPassWord == true ? 'password' : 'text'" name="密码" label="密码"
					placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]">
					<template #button>
						<van-icon name="eye-o" style="font-size: 25px;" @click="showPassWord = !showPassWord" />
					</template>
				</van-field>
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					登录
				</van-button>
			</div>
		</van-form>
		<!-- 已有帐号去登录页面登录 -->
		<p id="toregister" @click="toregister">没有账号,去注册!</p>
	</div>
</template>
<script setup>
import { showToast } from 'vant';
import { loginApi } from '@/api/api';
import { ref } from 'vue';
import router from '@/router';
const username = ref('')
const password = ref('')
// 显示与隐藏密码
let showPassWord = ref(true)
// 点击登录按钮 登陆成功 存储 token 和 用户名
const onSubmit = () => {
	console.log(username.value, password.value)
	//  获取接口 拿数据
	loginApi(username.value, password.value).then(res => {
		console.log('登录信息', res);
		// 判断是否和注册的信息一致
		if (res.data.code == 0) {
			localStorage.setItem('token', res.data.data.token)
			localStorage.setItem('username', res.data.data.username)
			showToast({
				type: 'success',
				message: '登录成功',
				onClose() {
					router.push('/')
				}
			})
		}
	})
}
// 没有帐号去注册页面
const toregister = () => {
	router.push('/register')
}
</script>
<style lang="scss" scoped>
#toregister {
	float: right;
	color: blue;
	margin-right: 20px;
	font-size: 16px;
}
</style>